<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
    <meta name="keywords"     content=""/>
    <meta name="description"  content=""/>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>#message {width: 300px; height: 200px; background-color: antiquewhite}</style>
</head>
<body>

<p>测试即时通讯</p>



<input type="hidden" name="uid" id="uid">
<input type="hidden" name="c_uid" id="c_uid">
<input type="hidden" name="client_id" id="client_id">
<input type="text" name="message" id="message">

<div class="btn" id="btn" onclick="sentMessage()">发送信息</div>


<script>
    if ("WebSocket" in window) {
        // 打开一个 web socket
        /**
         * 与GatewayWorker建立websocket连接，域名和端口改为你实际的域名端口，
         * 其中端口为Gateway端口，即start_gateway.php指定的端口。
         * start_gateway.php 中需要指定websocket协议，像这样
         * $gateway = new Gateway(websocket://0.0.0.0:7272);
         */
        ws = new WebSocket("ws://127.0.0.8:7272");
        // 服务端主动推送消息时会触发这里的onmessage
        ws.onmessage = function(e){
            // json数据转换成js对象 ---> eval可以将json文本，直接转化为对象， 但必须（）包括一下，防止语法报错！
            var data = eval("(" + e.data + ")");
            var type = data.type || '';

            switch(type){
                // Events.php中返回的init类型的消息，将client_id发给后台进行uid绑定
                case 'init':
                    // 利用jquery发起ajax请求，将client_id发给后端进行uid绑定
                    $.ajax({
                        type : "POST",
                        url  : "/index.php/wap/qq/bind",
                        data : {
                            client_id : data.client_id,
                            uid       : "{:input('param.uid')}",
                            c_uid     : "{:input('param.c_uid')}",
                        },
                        dataType:'json',
                        success: function(data){
                            $("#client_id").val(data.client_id);
                            $("#uid").val(data.uid);
                            $("#c_uid").val(data.c_uid);
                        }
                    });
                    break;
                case 'message':
                    console.log(type);
                    console.log(e.data);
                    console.log(data);
                    break;
                // 当mvc框架调用GatewayClient发消息时直接alert出来
                default :
                    alert('我操---居然这样' + e.data);
            }
        };
    }else{
        // 浏览器不支持 WebSocket
        alert("您的浏览器不支持 WebSocket!");
    }

    function sentMessage(){
        $.ajax({
            type : "POST",
            url  : "/index.php/wap/qq/send",
            data : {
                client_id : $("#client_id").val(),
                uid       : $("#uid").val(),
                c_uid     : $("#c_uid").val(),
                message   : $("#message").val(),
            },
            dataType:'json',
            success: function(data){
            }
        });
    }
</script>

</body>
</html>